<template>
  <div class="recommendSongs">
    <div class="playHeader">
      <p>推荐歌手</p>
    </div>
    <!-- 内容区域 -->
    <ul class="songRecommenMain">
      <li v-for="i in hotSongsArr" :key="i.id">
        <a href="#">
          <img :src="i.picUrl" alt />
          <p class="songsName">{{i.name}}</p>
          <p class="musicNum">单曲数{{i.musicSize}}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hotSongsArr: null
    }
  },
  methods: {
    async getHotSongs () {
      const { data: res } = await this.$http.get('/top/artists?offset=0&limit=30')
      this.hotSongsArr = res.artists
    }
  },
  created () {
    this.getHotSongs()
  }
}
</script>

<style lang="less">
.recommendSongs {
  .playHeader {
    height: 30px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .songRecommenMain {
    width: 100%;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    li {
      width: 138px;
      height: 200px;
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      a {
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 108px;
          height: 108px;
          border-radius: 50%;
          margin-bottom: 10px;
          display: flex;
          justify-content: center;
        }
        .songsName {
          font-weight: bold;
          margin-bottom: 10px;
          color: #000;
          text-align: center;
        }
        .musicNum {
          font-size: 14px;
          color: #fa2800;
          text-align: center;
        }
      }
    }
  }
}
</style>
